{__NOLAYOUT__}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>组织结构</title>
    {include file="public/script" /}

    <link rel="stylesheet" href="__STATIC__/chart/css/jquery.jOrgChart.css">
    <script src="__STATIC__/chart/js/jquery.js"></script>
    <script src="__STATIC__/chart/js/jquery.jOrgChart.js"></script>


    <style>
    *{
        margin: 0;
        padding: 0;
    }
        a {
            text-decoration: none;
            color: #000;
            font-size: 12px;
        }
        .jOrgChart .node {
            border-radius: 4px;
        }
        #jOrgChart{
            padding-top: 3.5rem;
        }
        #jOrgChart table{
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div class="sectionH sectionH2 mui-clearfix">
    <header class="mui-bar mui-bar-nav" style="">
        <a class="mui-icon mui-icon-left-nav  mui-pull-left" href="javascript:history.back(-1)" style="color: #727272;"></a>
        <h1 class="mui-title">组织结构</h1>
        <!--<a class="mui-icon mui-pull-right right1" href="javascript:;" style="padding-top: 10px;"><img src="images/nav_icon_search.png"/></a>-->
    </header>
</div>
<!--显示组织架构图-->
<div id='jOrgChart'></div>
<script type='text/javascript'>
    $(function(){
        var data={$data};
        var showlist = $("<ul id='org' style='display:none'></ul>");
        showall(data.data, showlist);
        $("#jOrgChart").append(showlist);
        $("#org").jOrgChart( {
            chartElement : '#jOrgChart',//指定在某个dom生成jorgchart
            dragAndDrop : true //设置是否可拖动
        });
    });

    function showall(menu_list, parent) {
        $.each(menu_list, function(index, val) {
            if(val.childrens.length > 0){
                var li = $("<li></li>");
                li.append("<a href='javascript:void(0)' >"+val.name+"</a>").append("<ul></ul>").appendTo(parent);
                //递归显示
                showall(val.childrens, $(li).children().eq(1));
            }else{
                $("<li></li>").append("<a href='javascript:void(0)' >"+val.name+"</a>").appendTo(parent);
            }
        });

    }

</script>
</body>
</html>